<template>
  <br />
  <br />
  <a-row class="card">
    <a-col :span="6">请输入年龄:</a-col>
    <a-col :span="18"><a-input v-model="info.sex" @keydown.tab="fun" /></a-col>
  </a-row>
  <br />
  <br />
  <!-- 事件v-on 用@替代 -->
  <a-button v-on:click="editerAge($event, 18)">修改年龄</a-button>
  <a-button @click="changeTitleStatus">修改状态</a-button>
  <a-button @click="getDetail">进入页面</a-button>
  <div class="loading-card" v-if="loading">
    <a-spin />
  </div>
  <a-card class="card" v-else @click="openCardDetail">
    <template #title>
      <!-- <div :class="baseStatus">
        {{ info.bedNo }}
      </div> -->
      <div
        :class="[
          'card-base-status',
          {
            'card-base-status-z': info.status == 0,
            'card-base-status-y': info.status == 2,
          },
        ]"
      >
        {{ info.bedNo }}
      </div>
      <!-- <div
        class="card-base-status"
        :style="{
          color: info.status == 0 ? '' : info.status == 2 ? 'yellow' : 'red',
        }"
      >
        {{ info.bedNo }}
      </div> -->
    </template>
    <template #extra>
      <!-- 事件修饰符 -->
      <a href="http://www.baidu.com" @click.prevent.stop="goBaidu"
        >图像导入 &gt;</a
      >
    </template>
    <div class="card-content-p">
      <div class="card-photo">
        <img src="../assets/logo.svg" />
        <img src="../assets/VIP.png" class="card-photo-vip" />
      </div>
      <div class="card-content-mes">
        <div>
          <!-- <input type="text" v-model="info.patientName" /> -->
          {{ info.patientName }}
        </div>
        <div>{{ info.medicalNumber }}</div>
      </div>
      <div class="card-content-mes">
        <div>{{ info.sex }} {{ info.age }}岁</div>
        <!-- <div>{{ info.phoneNumber }}</div> -->
        <div>{{ getTel }}</div>
      </div>
      <div class="card-content-mes">
        <div>医生（头颈组）</div>
        <div v-text="info.dateTime"></div>
      </div>
    </div>
    <div class="card-content">
      <div class="card-content-l">临床诊断：</div>
      <div class="card-content-r" :title="info.diagnosis">
        {{ info.diagnosis }}
      </div>
    </div>
    <div class="card-content">
      <div class="card-content-l">临床部位：</div>
      <div class="card-content-r" :title="info.diagnosisPosition">
        {{ info.diagnosisPosition }}
      </div>
    </div>
  </a-card>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  toRef,
  toRefs,
  computed,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
import { Card, Button, Spin, Input, Row, Col } from "ant-design-vue";
export default {
  name: "Card",
  components: {
    ACard: Card,
    AButton: Button,
    ASpin: Spin,
    AInput: Input,
    ARow: Row,
    ACol: Col,
  },
  setup() {
    let info = {
      patientName: "陆梦",
      sex: "女",
      age: 40,
      phoneNumber: "18842419562",
      avatar: null,
      idNumber: "",
      isVip: true,
      medicalNumber: "0021214545",
      taskName: "图像导入",
      bedNo: "605-2",
      diagnosis:
        "C34.901 非小细胞肺癌非小细胞肺C34.901 非小细胞肺癌非小细胞肺C34.901 非小细胞肺癌非小细胞肺",
      diagnosisPosition: "肺部  原发  T1N0M0",
      dateTime: "2021-08-15",
      status: 1, //0不显示，1是黄色，2是红色
    };
    let data = ref(info);
    let dataInfo = reactive({
      info: info,
      loading: false,
    });
    //计算属性
    let getTel = computed(() => {
      return getDesensitizationTel(dataInfo.info.phoneNumber);
    });

    //计算属性获取title显示的状态
    let baseStatus = computed(() => {
      return {
        "card-base-status": true,
        "card-base-status-z": dataInfo.info.status == 0,
        "card-base-status-y": dataInfo.info.status == 2,
      };
    });
    //修改年龄
    function editerAge(e, number) {
      console.log(e);
      console.log(number);
      data.value.age = number;
    }
    //手机号码脱敏处理,判断电话号大于10位数处理,其他情况正常返回
    function getDesensitizationTel(str) {
      if (null != str && str != undefined) {
        if (str.length > 10) {
          const pat = /(\d{3})\d*(\d{4})/;
          return str.replace(pat, "$1****$2");
        } else {
          return str;
        }
      } else {
        return "";
      }
    }
    //修改状态
    function changeTitleStatus() {
      dataInfo.info.status = 0;
    }

    //获取数据
    function getDetail() {
      dataInfo.loading = true;
      setTimeout(() => {
        dataInfo.loading = false;
      }, 1000);
    }

    //百度跳转
    function goBaidu(e) {
      console.log(11);
      // e.preventDefault();
    }
    //打开卡片详情
    function openCardDetail() {
      console.log(222);
    }
    //input中使用keydown
    function fun(e) {
      // e.preventDefault();
      // e.stopPropagation();
      console.log(343443);
    }
    onMounted(() => {
      console.log("onMounted");
      getDetail();
      window.addEventListener("keydown", (e) => {
        console.log(e);
      });
    });
    /* 
     注意： toref 第一个参数传参
    */
    let age = toRef(data.value, "age");

    let dataInfoRefs = toRefs(dataInfo);

    /* 初始化显示 */
    console.log("onbeforeCreate");
    console.log("onCreated");
    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    /* 更新状态 */
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    });
    onUpdated(() => {
      console.log("onUpdated");
    });
    /* 卸载vue实例 */
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("onUnmounted");
    });
    return {
      goBaidu,
      changeTitleStatus,
      editerAge,
      getDetail,
      openCardDetail,
      fun,
      ...dataInfoRefs,
      data,
      age,
      getTel,
      // dataInfo,
      baseStatus,
    };
  },
};
</script>

<style lang="less" scoped>
.loading-card {
  width: 400px;
  height: 235px;
  text-align: center;
  line-height: 230px;
}
.card {
  width: 400px;
  ::v-deep .ant-card-head {
    padding: 0px 24px 0px 0px;
  }
  &-base-status {
    position: relative;
    padding-left: 20px;
  }
  &-base-status::after {
    width: 4px;
    height: 60px;
    background: red;
    position: absolute;
    left: 0px;
    top: -20px;
    content: "";
  }
  &-base-status-z::after {
    background: none;
  }
  &-base-status-y::after {
    background: yellow;
  }
  &-content-p {
    overflow: hidden;
    .card-photo {
      width: 80px;
      height: 80px;
      position: relative;
      float: left;
      img:not(.card-photo-vip) {
        width: 100%;
        height: 100%;
      }
      &-vip {
        position: absolute;
        width: 20px;
        height: 20px;
        bottom: -2px;
        right: -2px;
      }
    }
    .card-content-mes {
      display: flex;
      align-content: center;
      width: calc(100% - 90px);
      margin-left: 90px;
      flex: none;
      line-height: 22px;
      margin-bottom: 4px;
      > div {
        width: 50%;
      }
      > div:last-child {
        text-align: right;
      }
    }
  }
  &-content {
    display: flex;
    align-content: center;
    line-height: 22px;
    margin-bottom: 4px;

    &-l {
      flex: 0 auto;
    }
    &-r {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &-content:last-child {
    margin-bottom: 0px;
  }
}
</style>